<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>结算单明细管理</title>
    <#include "/common/link.ftl">

</head>
<body class="hold-transition skin-black sidebar-mini">
<form class="box-body" class="form-horizontal" id="editForm" action="/consumption/saveOrUpdate" method="post">
    <div class="wrapper">
        <#include "/common/navbar.ftl">
        <!--菜单回显-->
        <#assign currentMenu="consumption"/>
        <#include "/common/menu.ftl">
        <div class="content-wrapper">
            <section class="content-header">
                <h1>结算单明细</h1>
            </section>
            <section class="content">
                <div class="box" style="padding: 10px;">
                    <div class="box" style="border-top: none;">
                        <div class="box-header with-border">
                            <h3 class="box-title"><span class="glyphicon glyphicon-triangle-right"></span> 结算单明细</h3>
                        </div>
                        <div class="box-body no-padding">
                            <div class="mailbox-controls">
                                <div class="btn-group">
                                    <#-- 新增 -->
                                    <button type="button"
                                            class="btn btn-default btn-sm checkbox-toggle btn-input addItemBtn"><i
                                                class="fa fa-plus"></i></button>
                                    <#-- 删除 -->
                                    <button type="button" class="btn btn-default btn-sm btnDelete"><i
                                                class="fa fa-trash-o"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="table-responsive mailbox-messages">
                                <table class="table table-hover table-striped">
                                    <thead>
                                    <tr>
                                        <th><input id="allcb" type="checkbox"></th>
                                        <th>业务大类</th>
                                        <th>业务小类</th>
                                        <th>结算类型</th>
                                        <th>消费金额(元)</th>
                                        <th>优惠金额(元)</th>
                                        <th>实收金额(元)</th>
                                    </tr>
                                    </thead>
                                    <tbody id="itemBody">

                                    <#list consumptionItems as tmp>
                                        <tr>
                                            <td><input class="itemcb" type="checkbox" onclick="itemClick()"></td>
                                            <td>${tmp.category.title}</td>
                                            <input value="${tmp.category.id}" type="hidden" name="categoryId">
                                            <td>${tmp.categoryItem.title}</td>

                                            <input type="hidden" value="${tmp.categoryItem.id}" name="categoryItemId">
                                            <td>${tmp.payType.title}</td>
                                            <input type="hidden" value="${tmp.payType.id}" name="payTypeId">

                                            <td class="totaltd">${(tmp.amount?c)!}</td>
                                            <input type="hidden" name="amount" value="${(tmp.amount?c)!}">

                                            <td class='discounttd'>${(tmp.discountAmount?c)!}</td>
                                            <input type="hidden" name="payAmountItem"
                                                   value="${(tmp.discountAmount?c)!}">

                                            <td class='paytd'>${(tmp.payAmount?c)!}</td>
                                            <input type="hidden" name="discountAmountItem"
                                                   value="${(tmp.payAmount?c)!}">
                                        </tr>
                                    </#list>

                                    </tbody>
                                    <tfoot>
                                    <tr>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                        <th>总消费金额:<span id="totalspan">${(currentConsumption.totalAmount?c)!0}</span>元
                                        </th>
                                        <th>总优惠金额:<span
                                                    id="discountspan">${(currentConsumption.discountAmount?c)!0}</span>元
                                        </th>
                                        <th>总实收金额:<span id="payspan">${(currentConsumption.payAmount?c)!0}</span>元</th>
                                    </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>
                    <br/>
                    <div class="box" style="border-top: none;">
                        <div class="box-header with-border">
                            <h3 class="box-title"><span class="glyphicon glyphicon-triangle-right"></span> 结算单信息</h3>
                        </div>
                        <#--                        <form class="box-body" class="form-horizontal" id="editForm" action="/aaaa" method="post">-->
                        <input type="hidden" name="id" value="${currentConsumption.id}">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>客户名称：</label>
                                    <input type="text" class="form-control" name="customerName"
                                           value="${currentConsumption.customerName}" placeholder="请输入客户名称">
                                </div>
                                <div class="form-group">
                                    <label>客户电话：</label>
                                    <input type="text" class="form-control" name="customerTel"
                                           value="${currentConsumption.customerTel}" placeholder="请输入客户电话">
                                </div>
                                <div class="form-group">
                                    <label>消费门店：</label>
                                    <select class="form-control" name="business.id" id="businessIdForm">
                                        <#list businesses as tmp>
                                            <option value="${tmp.id}">${tmp.name}</option>
                                        </#list>
                                    </select>
                                    <script>
                                        $("#businessIdForm").val(${currentConsumption.business.id})
                                    </script>
                                </div>
                                <div class="form-group">
                                    <label>进店时间：</label>
                                    <input type="text" class="form-control" id="beginDate"
                                           name="checkinTime"
                                           value="${(currentConsumption.checkinTime?string("yyyy-MM-dd HH:mm:ss"))!}">
                                </div>
                                <div class="form-group">
                                    <label>离店时间：</label>
                                    <input type="text" class="form-control" id="endDate"
                                           name="checkoutTime"
                                           value="${(currentConsumption.checkoutTime?string("yyyy-MM-dd HH:mm:ss"))!}">
                                </div>
                                <div class="form-group">
                                    <label>车牌记录：</label>
                                    <input type="text" class="form-control" placeholder="请输入车牌记录"
                                           name="carLicence" value="${currentConsumption.carLicence}">
                                </div>
                                <div class="form-group">
                                    <label>车型记录：</label>
                                    <input type="text" class="form-control" placeholder="请输入车型记录"
                                           name="carType" value="${currentConsumption.carType}">
                                </div>

                                <div class="form-group">
                                    <label>结算单备注：</label>
                                    <textarea class="form-control" rows="4" name="info"
                                              placeholder="请输入结算单备注">${currentConsumption.info}</textarea>
                                </div>
                                <div class="form-group">
                                    <label>结算单状态：</label>
                                    <input type="text" class="form-control" value="${currentConsumption.statusName}"
                                           readonly>
                                    <input type="hidden" class="form-control" value="${currentConsumption.status}"
                                           readonly name="status">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>总消费金额(元)：</label>
                                    <input type="text" class="form-control" id="totalInput" name="totalAmount"
                                           placeholder="" value="${(currentConsumption.totalAmount?c)!}"
                                           readonly>
                                </div>
                                <div class="form-group">
                                    <label>优惠金额(元)：</label>
                                    <input type="text" class="form-control" id="discountInput" name="discountAmount"
                                           placeholder=""
                                           value="${(currentConsumption.discountAmount?c)!}"
                                           readonly>
                                </div>
                                <div class="form-group">
                                    <label>实收金额(元)：</label>
                                    <input type="text" class="form-control" id="payInput" name="payAmount"
                                           placeholder="" value="${(currentConsumption.payAmount?c)!}"
                                           readonly>
                                </div>
                                <div class="form-group">
                                    <label>结算单流水号：</label>
                                    <input type="text" class="form-control" readonly name="cno"
                                           value="${currentConsumption.cno}">
                                </div>
                                <div class="form-group">
                                    <label>关联预约单流水号：</label>
                                    <input type="text" class="form-control" readonly name="appointmentAno"
                                           value="${currentConsumption.appointmentAno}">
                                </div>
                                <div class="form-group">
                                    <label>创建时间：</label>
                                    <input type="text" class="form-control" readonly name="createTime"
                                           value="${(currentConsumption.createTime?string("yyyy-MM-dd HH:mm:ss"))!}">
                                </div>
                                <div class="form-group">
                                    <label>结算时间：</label>
                                    <input type="text" readonly class="form-control" readonly name="payTime"
                                           value="${(currentConsumption.payTime?string("yyyy-MM-dd HH:mm:ss"))!}"/>
                                </div>
                                <div class="form-group">
                                    <label>结算人：</label>
                                    <input type="text" class="form-control" readonly
                                           value="${currentConsumption.payee.name}">

                                    <input type="hidden" class="form-control" readonly name="payee.id"
                                           value="${currentConsumption.payee.id}">
                                </div>
                                <div class="form-group">
                                    <label>审核时间：</label>
                                    <input type="text" class="form-control" readonly name="auditTime"
                                           value="${(currentConsumption.auditTime?string("yyyy-MM-dd HH:mm:ss"))!}">
                                </div>
                                <div class="form-group">
                                    <label>审核人：</label>
                                    <input type="text" value="${currentConsumption.auditor.name}" class="form-control"
                                           readonly>
                                    <input type="hidden" class="form-control" name="auditor.id"
                                           value="${currentConsumption.auditor.id}">
                                </div>
                            </div>
                        </div>

                        <#--    新增->保存 后退
                                编辑->
                                    待结算,保存,后退,删除
                                    待审核 审核 后退
                                    归档   后退
                                    坏账   后退
                                -->
                        <div class="pull-right">
                            <#if !currentConsumption.id??>
                                <button type="submit" class="btn btn-primary btn-submit"><span
                                            class="glyphicon glyphicon-book"></span> 保存
                                </button>
                            </#if>
                            <#if currentConsumption??>
                                <#if currentConsumption.status==0>
                                    <button type="submit" class="btn btn-primary btn-submit"><span
                                                class="glyphicon glyphicon-book"></span> 保存
                                    </button>
                                    <button id="jiesuanbtn" type="button" class="btn btn-warning btn-consume"><span
                                                class="glyphicon glyphicon-yen"></span> 结算
                                    </button>
                                    <button type="button" class="btn btn-danger btn-delete"><span
                                                class="glyphicon glyphicon-trash" id="deleteConBtn"></span> 删除
                                    </button>
                                </#if>
                                <#if currentConsumption.status==1>
                                    <button type="button" id="shenhebtn" class="btn btn-success btn-audit"><span
                                                class="glyphicon glyphicon-flag"></span> 审核
                                    </button>
                                </#if>
                            </#if>
                            <button type="button" class="btn btn-default" data-dismiss="modal" id="backbtn">后退</button>
                        </div>

                        <#--                        </form>-->
                    </div>
                </div>
            </section>
        </div>
        <#include "/common/footer.ftl">
    </div>
</form>
<!--模态框-->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">新增结算明细</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="editModelForm" action="/xxxx" method="post">
                <div class="modal-body">
                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label">业务大类：</label>
                        <div class="col-sm-7">
                            <select class="form-control" id="model_bigType" name="model_bigType">
                                <#--                                <option value="">请选择业务大类</option>-->
                                <#list bigType as tmp>
                                    <option value="${tmp.id}">${tmp.title}</option>
                                </#list>
                            </select>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label">业务小类：</label>
                        <div class="col-sm-7">
                            <select class="form-control" id="model_smallType" name="model_smallType">
                                <#--                                <option value="">请选择业务小类</option>-->
                                <#list smallType as tmp>
                                    <option value="${tmp.id}">${tmp.title}</option>
                                </#list>
                            </select>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label">结算类型：</label>
                        <div class="col-sm-7">
                            <select class="form-control" name="model_payType" id="model_payType">
                                <#--                                <option value="">请选择结算类型</option>-->
                                <#list payType as tmp>
                                    <option value="${tmp.id}">${tmp.title}</option>
                                </#list>
                            </select>
                        </div>
                    </div>

                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label">消费金额(元)：</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" id="model_total"
                                   placeholder="请输入应收金额">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label">优惠金额(元)：</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" id="model_discount"
                                   placeholder="请输入优惠金额">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label">实收金额(元)：</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" id="model_pay"
                                   placeholder="请输入实收金额">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary btn-submit saveItemBtn">保存</button>
                </div>
            </form>
        </div>
    </div>
</div>
<script>
    $("#deleteConBtn").click(function () {
        var id = ${(currentConsumption.id)!0};
        var cno = '${(currentConsumption.cno)!0}'
        Swal.fire({
            title: '确认删除?',
            text: '确认删除?',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: '是!',
            cancelButtonText: '否!'
        }).then((result) => {
            if (result.value) {
                //点击确认按钮后做的事情
                $.post("/consumption/delete", {id: id, cno: cno}, function (data) {
                    if (data.success) {
                        Swal.fire({
                            title: '删除成功',
                            text: "删除成功",
                            icon: 'success',
                            timer: 2000,
                        }).then((result) => {
                            window.location.href = "/consumption/list";
                        })
                    }
                })
            }
        })
    })

    $("#backbtn").click(function () {
        window.location.href = "/consumption/list";
    })

    $("#jiesuanbtn").click(function () {
        var id = ${(currentConsumption.id)!0};
        $.post("/consumption/updateStatus", {id: id, status: 1}, function (data) {
            window.location.reload();
        })
    })

    $("#shenhebtn").click(function () {
        var id = ${(currentConsumption.id)!0};
        Swal.fire({
            title: '是否通过审核',
            text: '是否通过审核',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: '是!',
            cancelButtonText: '否!'
        }).then((result) => {
            if (result.value) {
                //点击确认按钮后做的事情

                $.post("/consumption/updateStatus", {id: id, status: 2}, function (data) {
                    if (data.success) {
                        Swal.fire({
                            title: '操作成功',
                            text: "审核成功",
                            icon: 'success',
                            timer: 2000,
                        }).then((result) => {
                            window.location.reload();
                        })
                    }
                })
            } else {

                $.post("/consumption/updateStatus", {id: id, status: 3}, function (data) {
                    if (data.success) {
                        Swal.fire({
                            title: '操作成功',
                            text: "已坏账",
                            icon: 'success',
                            timer: 2000,
                        }).then((result) => {
                            window.location.reload();
                        })
                    }
                })
            }
        })


    })

    $(".addItemBtn").click(function () {
        $("#editModelForm")[0].reset();
        $("#editModal").modal("show");
    })

    $("#allcb").change(function () {
        $(".itemcb").prop("checked", $(this).prop("checked"))
    })

    function itemClick() {
        var all = $(".itemcb").size();
        console.log(all)
        var selected = $(".itemcb:checked").size();
        console.log(selected)
        $("#allcb").prop("checked", all == selected)
    }

    $(".saveItemBtn").click(function () {
        var model_bigTypeValue = $("#model_bigType").val();
        var model_bigTypeName = $("#model_bigType option:selected").html();

        var model_smallTypeValue = $("#model_smallType").val();
        var model_smallTypeName = $("#model_smallType option:selected").html();

        var model_payTypeValue = $("#model_payType").val();
        var model_payTypeName = $("#model_payType option:selected").html();

        var model_total = $("#model_total").val();
        var model_discount = $("#model_discount").val();
        var model_pay = $("#model_pay").val();


        <#--                                    <tr>-->
        <#--                                        <td><input class="itemcb" type="checkbox"></td>-->
        <#--                                        <td>售卖</td>-->
        <#--                                        <input type="hidden" name="categoryId">-->
        <#--                                        <td>二手车</td>-->
        <#--                                        <input type="hidden" name="categoryItemId">-->
        <#--                                        <td>服务费</td>-->
        <#--                                        <input type="hidden" name="payTypeId">-->
        <#--                                        <td class="tdtoatal">5,480.00</td>-->
        <#--                                        <input type="hidden" name="amount">-->
        <#--                                        <td>159.86</td>-->
        <#--                                        <input type="hidden" name="payAmount">-->
        <#--                                        <td>5,320.14</td>-->
        <#--                                        <input type="hidden" name="discountAmount">-->
        <#--                                    </tr>-->


        var td1 = $('<td><input class="itemcb" type="checkbox" onclick="itemClick()"></td>');
        var td2 = $("<td></td>");

        var input2 = $('<input type="hidden" name="categoryId">');
        td2.html(model_bigTypeName)
        input2.val(model_bigTypeValue)
        var td3 = $("<td></td>");
        var input3 = $('<input type="hidden" name="categoryItemId">');
        input3.val(model_smallTypeValue)
        td3.html(model_smallTypeName)
        var td4 = $("<td></td>");
        var input4 = $('<input type="hidden" name="payTypeId">');
        input4.val(model_payTypeValue)
        td4.html(model_payTypeName);
        var td5 = $("<td class='totaltd'></td>");
        var input5 = $('<input type="hidden" name="amount">');
        input5.val(model_total)
        td5.html(model_total);
        var td6 = $("<td class='discounttd'></td>");
        var input6 = $('<input type="hidden" name="discountAmountItem">');
        input6.val(model_discount)
        td6.html(model_discount)
        var td7 = $("<td class='paytd'></td>");
        var input7 = $(' <input type="hidden" name="payAmountItem">');
        input7.val(model_pay)
        td7.html(model_pay);

        var tr = $("<tr></tr>")
        tr.append(td1);
        tr.append(td2);
        tr.append(td3);
        tr.append(td4);
        tr.append(td5);
        tr.append(td6);
        tr.append(td7);

        tr.append(input2);
        tr.append(input3);
        tr.append(input4);
        tr.append(input5);
        tr.append(input6);
        tr.append(input7);

        $("#itemBody").append(tr)
        $("#editModal").modal("hide");

        $("#totalspan").html(parseFloat($("#totalspan").html()) + parseFloat(model_total))
        $("#discountspan").html(parseFloat($("#discountspan").html()) + parseFloat(model_discount))
        $("#payspan").html(parseFloat($("#payspan").html()) + parseFloat(model_pay))

        $("#totalInput").val($("#totalspan").html());
        $("#discountInput").val($("#discountspan").html());
        $("#payInput").val($("#payspan").html());
    })

    $(".btnDelete").click(function () {
        var cbs = $(".itemcb:checked");
        for (var i = 0; i < cbs.length; i++) {
            var cb = $(cbs[i]);
            //先找到total pay discount
            var tr = cb.parent().parent();
            var totaltd = tr.children(".totaltd");
            var discounttd = tr.children(".discounttd");
            var paytd = tr.children(".paytd");

            $("#totalspan").html(parseFloat($("#totalspan").html()) - parseFloat(totaltd.html()))
            $("#discountspan").html(parseFloat($("#discountspan").html()) - parseFloat(discounttd.html()))
            $("#payspan").html(parseFloat($("#payspan").html()) - parseFloat(paytd.html()))

            $("#totalInput").val($("#totalspan").html());
            $("#discountInput").val($("#discountspan").html());
            $("#payInput").val($("#payspan").html());

            tr.remove();
            $("#allcb").prop("checked", false);
        }
    })

    $('#beginDate,#endDate').datetimepicker({
        format: 'yyyy-mm-dd HH:ii:ss', //格式
        language: 'zh-CN', //中文
        autoclose: true,//选择后自动关闭
        //showMeridian:true, //是否显示上下午
        minView: 1,//精确到哪位
    });

</script>

</body>
</html>
